<template>
  <view class="content">
    <z-paging ref="paging" v-model="dataList" @query="queryList">
      <!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
      <!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
      <template #top>
        <z-tabs :list="tabList" @change="tabChange" />
      </template>
      <!-- 自定义下拉刷新view(如果use-custom-refresher为true且不设置下面的slot="refresher"，此时不用获取refresherStatus，会自动使用z-paging自带的下拉刷新view) -->
<!--      <template #refresher="{refresherStatus}">-->
<!--        &lt;!&ndash; 此处的custom-refresh为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，下拉刷新就显示什么view &ndash;&gt;-->
<!--        <custom-refresher :status="refresherStatus" />-->
<!--      </template>-->
      <!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内，并用header(吸顶)或cell包住 -->
      <!-- 在nvue中，z-paging中插入的列表item必须是cell，必须使用cell包住，因为在nvue中，z-paging使用的是nvue的list组件。 -->
      <!-- 不能使用index作为key的唯一标识，:key必须添加并且必须是唯一的 -->
      <!-- 如果希望在vue中渲染view，nvue中渲染cell，可使用z-paging-cell代替cell -->
	  <view class="flexcolumn ">

      <view class="item padding" v-for="(item,index) in dataList" :key="index" @click="itemClick(item)">
        <view class="item-line"></view>
       <view class="flexrowspacebetween">
         <view>
           <text v-if="item.msgType === 1 || item.msgType ===2 || item.msgType ===3 || item.msgType ===4" class="cu-tag">报警</text>
           <text v-if="item.msgType === 5" class="cu-tag">资费</text>
           <text v-if="item.msgType === 1 || item.msgType ===2 || item.msgType ===3 || item.msgType ===4" class="margin-lr text-sm text-black">报警信息</text>
           <text v-if="item.msgType === 5" class="margin-lr text-sm text-black">资费信息</text>
         </view>
         <text class="item-title text-sm">{{item.msgTime | dateFomatterYYYYMMDD}}</text>
       </view>

        <view class="flexrowspacebetween padding-tb-xs" style="min-height: 50px">
          <view class="" style="width: 500rpx">
            <text class="text-xs" style="line-height: 10px">{{item.content}}</text>
          </view>

          <view>
            <text v-if="!item.readStatus" class="cuIcon-title text-red"></text>
            <uni-icons color="#666" size="16" type="right" />
          </view>
        </view>
      </view>

	  </view>
    </z-paging>
  </view>
</template>


<script>
import {
  updateIsRead,
  notifyMessage
} from "@/api/mine/index"
import dayjs from "dayjs";
export default {
  data() {
    return {
      //v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
      dataList: [],
      tabList: ['全部消息','报警消息','资费提醒'],
      tabIndex: 0
    }
  },
  filters: {
    dateFomatterYYYYMMDD (date) {
      return date ? dayjs(date).format('YYYY-MM-DD') : ''
    }
  },
  computed: {
    id() {
      return this.$store.state.user.id
    },
  },
  methods: {
    tabChange(index) {
      this.tabIndex = index;
      //当切换tab或搜索时请调用组件的reload方法，请勿直接调用：queryList方法！！
      //调用reload时参数传true则代表reload时触发下拉刷新效果，不传或false则代表取消此效果
      this.$refs.paging.reload(true);
    },
    queryList(pageNo, pageSize) {
      //组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
      //这里的pageNo和pageSize会自动计算好，直接传给服务器即可
      //模拟请求服务器获取分页数据，请替换成自己的网络请求
      const params = {
        pageNo: pageNo,
        pageSize: pageSize,
        type: this.tabIndex == 0 ? null :this.tabIndex,
        userId:this.id
      }
      notifyMessage(params).then(res => {
        //将请求的结果数组传递给z-paging
        this.$refs.paging.complete(res.data.list);
      }).catch(res => {
        //如果请求失败写this.$refs.paging.complete(false);
        //注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
        //在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
        this.$refs.paging.complete(false);
      })
    },
    itemClick(item) {
      uni.navigateTo({
        url: '/pages/mine/system-messages-content/system-messages-content?data=' +encodeURIComponent(JSON.stringify(item))
      })

      updateIsRead({
        ids: item.id
      }).then(({data})=>{
        if(data) {
          item.readStatus = 1
          uni.$emit('refresh-countreadnum')
        }
      })
    }
  }
}
</script>

<style>
.item {
  background-color: #ffffff;
  flex-direction: row;
  position: relative;

  align-items: center;
  justify-content: space-between;
}

.item-line {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #eeeeee;
}
</style>
